<template>
  <div>
    <div v-show="!disabled">
        <script id="editor" type="text/plain"></script>
    </div>
    <div v-if="disabled">
        <AutoIframe v-if="type=='html'" :content="content"></AutoIframe>
        <div v-if="type=='content'" v-html="content"></div>
        <div v-if="type=='text'" v-text="content"></div>
    </div>
  </div>
</template>
<script>
import './ueditor/ueditor.config.js'
import './ueditor/ueditor.all.js'
import './ueditor/lang/zh-cn/zh-cn.js'
import './ueditor/ueditor.parse.js'
import AutoIframe from "../AutoIframe";

export default {
    name: 'UE',
    components: {
        AutoIframe
    },
    data () {
        return {
            editor: null,
            tempContent: ""
        }
    },
    props: {
        model: {
            type: Object
        },
        prop: {
            type: String,
            default: 'content'
        },
        type: {
            type: String,
            default: "content" // html, content, text
        },
        config: {
            type: Object,
            default() {
                return {
                    initialFrameWidth: null,
                    initialFrameHeight: 350
                }
            }
        },
        disabled: {
            type: Boolean,
            default: false
        },
        escape: {
            type: Boolean,
            default: false
        },
        height: {
            type: Number,
            default: 300
        }
    },
    computed: {
        value() {
            return this.model[this.prop];
        },
        c_value() {
            if(this.escape) return unescape(this.value);
            else return this.value;
        },
        content() {
            if(this.escape) return unescape(this.getUEContent());
            else return this.getUEContent();
        }
    },
    methods: {
        getUEContent() { // 获取内容方法
            var result = "";
            try {
                if(this.type == "html") result = this.editor.getAllHtml();
                else if(this.type == "content") result = this.editor.getContent();
                else if(this.type == "text") result = this.editor.getContentTxt();
            }catch(err) {
                console.log(err);
                result = this.c_value;
            }
            if(this.escape) return escape(result);
            else return result;
        }
    },
    mounted() {
        const _this = this;
        this.editor = UE.getEditor('editor', this.config); // 初始化UE
        this.editor.addListener("afterready", function () {
            _this.editor.setContent(_this.c_value); // 确保UE加载完成后，放入内容。
            _this.editor.setHeight(_this.height); // 确保UE加载完成后，放入内容。
        });
        this.editor.addListener("contentChange", () => {
            this.model[this.prop] = this.getUEContent();
            this.tempContent = this.model[this.prop];
        });
    },
    destroyed() {
        this.editor.destroy();
    },
    watch: {
        value(value) {
            if(this.editor.isReady && this.c_value != this.tempContent) this.editor.setContent(this.c_value); // 当传入的值改变时，同样能够自动刷新
        }
    }
}
</script>